<style scoped>
	.container{
		width:90%;
		height: 44px;
		margin-left: 5%;
		border-radius: 3em;
		border:1px solid darkgrey;
		background-color: rgba(255,255,255,.6);
		position: relative;
    z-index: 2;
	}
	.container2{
		position: static;
	}

	.left{
		display: inline-block;
		width: 30%;
		vertical-align: middle;
	}
	.right{
    display: inline-block;
    width: 51%;
    margin-left: 10%;
    border-left: 1px solid red;
    vertical-align: middle;
	}
	#input{
		background-color:transparent;
		height: 20px;
    border: 0;
    background-image:url(../resource/images/camp/searchbg.png);
    background-repeat: no-repeat;
    background-size:50%;
    background-position: 50%;
    border-radius: 10em;
    position: relative;
    z-index: 2;
	}
	#input:focus{
		border:0;
		background:transparent;
	}
</style>
<template>
	<div class="container">
		<div class="left"><linkage></linkage></div>
		<div class="right"><input v-model="txt" :style="bg" @change="isbg" id="input" type="text" name="keyWord"></div>
		<i style="display:inline-block;height:100%;width0;vertical-align:middle"></i>
	</div>
</template>
<script>
	var linkage = require('../component/public/linkage.vue');
	module.exports = {
		data:function(){ 
			return {
				bg:"",
				txt:"",
				keyWord:""
			}
		},
		methods:{
			isbg:function(){
				if(this.txt!=''){
					this.bg="background:transparent;";
				}else{
					this.bg="background-image:url(../resource/images/camp/searchbg.png);";
				}
			},
			search:function(){
				
			}
		},
		ready:function(){
			var container = document.querySelector(".container");
			var open = false;
			document.querySelector(".left").addEventListener("click",function(){
				if(!open){
					container.classList.add("container2");
				}else{
					container.classList.remove("container2");
					open = false;
				}
			});
			document.querySelector(".ProvCityBoxBg").addEventListener('click',function(){
				open = true;
			});
			document.querySelector(".ProvCityHeaderConfirm").addEventListener('click',function(){
				open = true;
			});
			document.querySelector(".ProvCityHeaderCancle").addEventListener('click',function(){
				open = true;
			});
		},
		components:{
			linkage:linkage
		}
	}
</script>